import { defineStore } from 'pinia';
import axios from 'axios';
import { markRaw } from 'vue';
import Topitem1 from '@/Top/Topitem1.vue';
import Topitem2 from '@/Top/Topitem2.vue';
import Topitem3 from '@/Top/Topitem3.vue';
import Topitem4 from '@/Top/Topitem4.vue';
export const useDataStore = defineStore('data', {
  state: () => ({
    data: [],
    cardItems: [
      { title: '累计销售额', component: markRaw(Topitem1) },
      { title: '累计订单额', component: markRaw(Topitem2) },
      { title: '今日用户交易数', component: markRaw(Topitem3) },
      { title: '累计用户数', component: markRaw(Topitem4) },
    ],
    option1: {
      xAxis: {
        show: false,
        type: 'category',
        boundaryGap: false,
      },
      yAxis: {
        type: 'value',
        show: false,
      },
      grid: {
        top: 0,
        left: 0,
        right: 0,
        bottom: 20,
      },
      series: [
        {
          data: [],
          type: 'line',
          smooth: true,
          areaStyle: {
            opacity: 1,
            color: 'rgb(173, 26, 231)',
          },

          lineStyle: {
            opacity: 0,
          },
          itemStyle: {
            opacity: 0,
          },
        },
      ],
    },
    option2: {
      tooltip: {},
      xAxis: {
        show: false,
        type: 'category',
        // boundaryGap: false,
        data: [
          '00:00',
          '01:00',
          '02:00',
          '04:00',
          '06:00',
          '07:00',
          '10:00',
          '12:00',
          '15:00',
          '18:00',
          '21:00',
          '24:00',
        ],
      },
      yAxis: {
        type: 'value',
        show: false,
      },
      grid: {
        top: 0,
        left: 0,
        right: 0,
        bottom: 20,
      },
      series: [
        {
          name: '实时交易量',
          data: [],
          type: 'bar',
        },
      ],
    },
    option3: {
      title: {
        text: '年度销售额',
        textStyle: {
          fontSize: 14,
          color: '#333',
        },
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        // boundaryGap: false,
        data: [],
      },
      yAxis: {
        type: 'value',
        // show: false,
      },
      grid: {
        top: 60,
        left: 40,
        right: 10,
        bottom: 30,
      },
      series: [
        {
          data: [],
          type: 'bar',
          itemStyle: {
            color: '#409EFF', // 蓝色作为示例，可以修改为任意颜色值
          },
          // 设置柱子宽度
          barWidth: '40%', // 可以是像素值或百分比
        },
      ],
    },
    option4: {
      title: {
        text: '年度销售额',
        textStyle: {
          fontSize: 14,
          color: '#333',
        },
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        // boundaryGap: false,
        data: [],
      },
      yAxis: {
        type: 'value',
        // show: false,
      },
      grid: {
        top: 60,
        left: 40,
        right: 10,
        bottom: 30,
      },
      series: [
        {
          data: [],
          type: 'bar',
          itemStyle: {
            color: '#409EFF', // 蓝色作为示例，可以修改为任意颜色值
          },
          // 设置柱子宽度
          barWidth: '40%', // 可以是像素值或百分比
        },
      ],
    },
    data1: [],
    data2: [],
    data3: [],
  }),

  actions: {
    async getTopData() {
      const res = await axios.get(
        'http://project.x-zd.net:3001/apis/reportdata'
      );
      this.data = res.data;
      this.option1.series[0].data = this.data.orderTrend;
      this.option2.series[0].data = this.data.orderUserTrend;
    },
    async getSecondData() {
      const res = await axios.get('http://project.x-zd.net:3001/apis/saledata');
      this.data3 = res.data;
      this.option3.xAxis.data = this.data3.saleFulleYearAxis;
      this.option3.series[0].data = this.data3.saleFulleYear;
      this.data1 = this.data3.saleRank;
      this.data2 = this.data3.visitRank;
      this.option4.xAxis.data = this.data3.visitFullYeadAxis;
      this.option4.series[0].data = this.data3.visitFullYear;
    },
  }
  
});